<template>
  <div class="home">
    <!-- 顶部 -->
    <!-- 1.0 头部区域  主页-->

    <div style="width: 1100px;margin-left: 120px;">
      <div class="search">
        <!-- 图标 -->
        <div style="">
          <img
            style="width: 140px; height: 50px"
            src="../static/logo.png"
            alt=""
          />
        </div>
        <!-- 搜索 -->
        <div style="margin-top: 50px;margin-left: 100px;">
          <div style="display: flex">
            <el-input
              style="width: 400px"
              v-model="search"
              type="string"
              placeholder="请输入内容"
            >
            </el-input>
            <!-- 搜索按钮 -->
            <a href="javascript:void(0)"
             @click="searchGo"
              style="
                width: 60px;
                background-color: #c91424;
                color: white;
                font-size: 14px;
                display: flex;
                justify-content: center;
                align-items: center;

              "
              >搜索</a
            >
          </div>

          <div>

            <ul class="tabs" >
              <li v-for=" item,index in searchData" :key="index">
                <a href="">{{ item }}</a>
              </li>

            </ul>
          </div>

        </div>
        <!-- 购物车 -->
        <a href="/cart"
          style="
            background-color: #f9f9f9;
            width: 120px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;

          "
          >
          <!-- <i class="iconfont icon-gouwuche"></i> -->
           <img style="width: 16px;height: 16px;" src="../static/gouwuche.png" alt="">
          <span style="font-size: 12px; padding-left: 5px">我的购物车</span>
          <span
            style="
              background-color: red;
              border-radius: 50%;
              width: 14px;
              height: 14px;
              color: white;
              margin-top: -20px;
              font-size: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            ><span style="margin-top: -2px">0</span></span
          >
      </a>
      </div>
    </div>
    <!-- 中间部分 -->

    <div class="main"><router-view /></div>

    <!--页面底部-->
    <div class="footer">
      <Footer></Footer>
    </div>
    <!--/页面底部-->
  </div>
</template>

<style lang="less" scoped>
/* .home{
  width: 1100px;
  text-align: center;
} */
.header {
  background-color: #bdbcbc;
}

// nav搜索栏
.search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
}
.tabs{
  display: flex;
  gap: 20px;
  padding-top: 10px;
  font-size: 14px;
  padding-left: 0;
}
/deep/.el-tabs__nav-wrap::after {
  // 去掉下划线
  position: static !important;
}

/deep/ .el-input__inner {
  height: 30px;
  border-radius: 0 0 0 0; //去掉圆弧
  border-right: none;
  border-left: 2px solid #c91424;
  border-top: 2px solid #c91424;
  border-bottom: 2px solid #c91424;
}

// 鼠标悬停时改变input边框的颜色
/deep/ .el-input__inner:hover {
  border-color: #c91424 !important;
}
// 鼠标聚焦后悬停时改变input边框的颜色
/deep/ .el-input__inner:focus,
.el-input__inner:focus:hover {
  border-color: #c91424 !important;
}

/deep/ .el-tabs__active-bar {
  display: none; /* 隐藏激活标签的下划线 */
}

/deep/ .el-tabs__item.is-top.is-active {
  color: red;
}
/* 修改悬停颜色 */
/deep/ .el-tabs__item:hover {
  color: #ccc;
}
/* 调整选项卡之间的水平间距 */
/deep/ .el-tabs__item {
  padding-left: 0px;
}
</style>

<script>

import Footer from './home/footer/index.vue'
export default {
  name: 'home',
  components: {

    Footer: Footer
  },
  data () {
    return {
      search: '', // 搜索数据
      activeName: 'first',
      username: '',
      searchData: [
        '黑马首发', '亿元优惠', '9.9元团购', '每满99减30', '办公用品', '厨房用品']
    }
  },

  methods: {
    handleClick () {
      // console.log('111')
    },
    // 去搜索页面
    searchGo () {
      this.$router.push({
        path: '/search',
        query: {
          search: this.search
        }
      })
    }
  }

}
</script>
